<template>
  <div class="info">
    <div class="addprogram">
      <el-button type="primary" @click="addData">新增标签组</el-button>
    </div>

    <el-dialog :visible.sync="addDialog" :before-close="cancelData" title="新增标签组" width="590px">
      <el-form ref="dataForm" :model="TagGroup">
        <el-form-item :label-width="formLabelWidth" label="标签组名称">
          <el-input v-model="TagGroup.name" style="width:300px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用于">
          <el-checkbox v-model="TagGroup.courseScope">课程列表筛选</el-checkbox>
          <el-checkbox v-model="TagGroup.classScope">班级列表筛选</el-checkbox>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="包含标签">
          <el-drag-select v-model="oldTagNames" style="width:300px;" multiple placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item"/>
          </el-drag-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddData()">取 消</el-button>
        <el-button type="primary" @click="createData()">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="editDialog" :before-close="cancelData" title="修改标签" width="590px">
      <el-form ref="updateForm" :model="TagGroup">
        <el-form-item :label-width="formLabelWidth" label="标签组名称">
          <el-input v-model="TagGroup.name" style="width:300px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用于">
          <el-checkbox v-model="TagGroup.courseScope">课程列表筛选</el-checkbox>
          <el-checkbox v-model="TagGroup.classScope">班级列表筛选</el-checkbox>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="包含标签">
          <el-drag-select v-model="oldTagNames" style="width:300px;" multiple placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item"/>
          </el-drag-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelData()">取 消</el-button>
        <el-button type="primary" @click="updateData()">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteRow)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <subtable :table-data="tableData" :table-label="tableLabel">
      <el-table-column slot="button" align="center" label="操作" min-width="20">
        <template slot-scope="scope">
          <el-button type="primary" @click="updateCLick(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteCLick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </subtable>
  </div>
</template>

<script>
  import ElDragSelect from '@/components/DragSelect'
  import Subtable from '@/components/Eltable'
  import {add, deleteTagGroup, list, update} from '@/api/subject/tag_group' // 数据接口
  import {tagList} from '@/api/subject/tag'
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      Subtable,
      ElDragSelect
    },
    data() {
      return {
        formLabelWidth: '120px',
        addDialog: false,
        editDialog: false,
        oldTagNames: [],
        TagGroup: {
          name: '',
          courseScope: false,
          classScope: false,
          // tagIds: [],
          tagNames: '',
          tag: ''
        },
        options: [],
        // 列表编辑按钮
        updateCLick(row) {
          this.editDialog = true;
          this.TagGroup = Object.assign({}, row);
          this.oldTagNames = [];
          if (this.TagGroup.tag) {
            this.oldTagNames = Array.from(JSON.parse(this.TagGroup.tag))
          }
        },
        handleDelete: false,
        // 删除
        deleteRow: '',
        deleteCLick(row) {
          this.handleDelete = true;
          this.deleteRow = row
        },
        tableLabel: [
          {
            label: 'ID', width: '5', prop: 'id'
          }, {
            label: '标签组名称', width: '20', prop: 'name'
          },
          {
            label: '包含标签', width: '20', prop: 'tagName'
          },
          {
            label: '标签组创建时间', width: '20', prop: 'createTimeTimeStr'
          }
        ],
        tableData: []
      }
    },
    created() {
      this.getData()
    },
    mounted() {
      this.tagList()
    },
    methods: {
      addData() {
        this.addDialog = true;
        this.TagGroup = {
          name: '',
          courseScope: false,
          classScope: false,
          // tagIds: [],
          tagNames: '',
          tag: ''
        }
      },
      // 接口获取数据
      getData() {
        list(getTenantId()).then(response => {
          this.tableData = response.data.items;
          this.tableData.map(item => {
            item.tagNames = item.tagNames.replace(reg, "");
          });
          this.total = response.data.items.length;
          this.listFilter = response.data.items
        })
      },
      tagList() {
        tagList(getTenantId()).then(response => {
          const tags = response.data.items;
          for (const item in tags) {
            this.options.push({'label': tags[item].id, 'value': tags[item].name})
          }
        })
      },
      createData() {
        this.addDialog = false;
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.TagGroup.tenantId = getTenantId();
            let newTagNames = [];
            this.oldTagNames.map(item => {
              newTagNames.push(item['value'])
              // this.TagGroup.tagIds.push(item['label'])
              // this.TagGroup.tag.push({'id': item['label'], 'value': item['value']})
            });
            this.TagGroup.tagNames = JSON.stringify(newTagNames);
            this.TagGroup.tag = JSON.stringify(this.oldTagNames);
            add(this.TagGroup).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
              this.getData()
            })
          }
        })
      },
      deleteData(row) {
        this.handleDelete = false;
        deleteTagGroup(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.getData()
        })
      },
      updateData() {
        this.editDialog = false;
        this.$refs.updateForm.validate((valid) => {
          if (valid) {
            update(this.TagGroup).then(() => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              });
              this.getData()
            })
          }
        })
      },
      cancelData() {
        this.editDialog = false;
        this.$refs['updateForm'].resetFields();
        this.oldTagNames = [];
      },
      cancelAddData() {
        this.addDialog = false;
        this.$refs['dataForm'].resetFields();
        this.oldTagNames = [];
      }
    }
  }
</script>

<style lang="scss">
  .info {
    .el-dialog {
      border-radius: 6px;
    }

    .addprogram {
      width: 100%;
      padding: 0 0 21px 0;
      height: 36px;

      .el-button {
        float: right;
      }
    }

    .drag-select > > > .sortable-ghost {
      opacity: .8;
      color: #fff !important;
      background: #42b983 !important;
    }
  }
</style>
